<!-- 检验有效期预警 -->
<template>
  <homeCard title="检验有效期预警" height="365px">
  	<mCharts :options="options" @click="toNext"></mCharts>
  </homeCard>
</template>

<script setup>
	import { reactive, ref, onMounted, onBeforeUnmount } from 'vue'
	import homeCard from "./home-card.vue";

	import {httpPost} from "@/api";

	import {useRouter} from "vue-router";
	const router = useRouter();

	const options = ref();

	onMounted(() => {
		getData();
	})

	function getData() {
		httpPost("query/index/expirationDate").then(res => {
			if(res.code) {
				return;
			}
			showOption(res[0].count, res[1].count, res[2].count, res[3].count);
		})
	}

	function showOption(num0, num1, num2, num3) {
		options.value = {
			color: ['#308FEF', '#D269F9', '#EB4E4E', '#F1D90B'],
		  tooltip: {
		    trigger: 'item'
		  },
		  legend: {
		  	orient: 'vertical',
		    right: '20%',
		    bottom: '30px'
		  },
		  series: [
		    {
		      name: '检验有效期预警',
		      type: 'pie',
		      radius: ['40%', '70%'],
		      center: ['35%', '50%'],
		      data: [
		        // { value: num0 || 0, name: '正常' },
		        { value: num1 || 0, name: '临期', status: 1 },
		        { value: num2 || 0, name: '到期', status: 2 },
		        { value: num3 || 0, name: '超期', status: 3 },
		      ]
		    }
		  ]
		}
	}

	function toNext(params) {
		router.push({
			path: '/inspectionValidityWarning',
			query: {
				expiration_status: params.data.status
			}
		})
	}

</script>

<style scoped>

</style>